    .header-row {
      display: flex;
      // flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      user-select: none;
      pointer-events: none;
    }

    .id-icon {
      position: relative;
      top: 1px;
      font-size: 20px;
      transform: rotate(180deg);
      margin-top: -4px;
      opacity: 0.8;
    }

    .katal {
      background-color: #fff;
      color: #002f36;
      font-family: Amazon Ember, Arial, sans-serif !important;
      // font-family: Amazon Ember !important;
      // font-size: .8125rem;
      font-size: 13px;
      font-weight: 400;
      line-height: 18px;
      margin: 0
    }

    .select-header {
      border: 1px solid #000;
      border-color: #a9b7b8;
      color: #667575;
      font-size: 13px;
      line-height: 26px;
      padding: 0px 8px;
      // line-height: 18px;
      box-sizing: border-box;
      background: #ffffff;

    }

    .label-text {
      margin-right: 10px;
    }

    .indicator {
      color: var(--color);
      font-size: var(--font-size);
      font-weight: var(--font-weight);
      font-family: var(--font-family);
      line-height: var(--line-height);
      letter-spacing: var(--letter-spacing);
      position: relative;
      background: var(--background);
      border-color: var(--border-color);
      border-width: var(--border-width);
      border-style: var(--border-style);
      text-align: var(--text-align);
      cursor: pointer
    }

    .button:before,
    .indicator:before {
      top: calc(var(--focus-ring-outlay)*-1);
      bottom: calc(var(--focus-ring-outlay)*-1);
      pointer-events: none;
      position: absolute;
      z-index: 1;
      content: "";
      border-radius: var(--hover-ring-radius)
    }

    :host(:not([dir=rtl])) .button:before,
    :host(:not([dir=rtl])) .indicator:before,
    :host([dir=rtl]) .button:before,
    :host([dir=rtl]) .indicator:before {
      left: calc(var(--focus-ring-outlay)*-1);
      right: calc(var(--focus-ring-outlay)*-1)
    }

    .button:hover,
    .indicator:hover {
      --background: var(--background-hover);
      --border-color: var(--border-color-hover);
      --color: var(--color-hover)
    }

    .button:focus:not(:active),
    .indicator:focus:not(:active) {
      --background: var(--background-focus);
      --border-color: var(--border-color-focus);
      --color: var(--color-focus);
      outline: 0
    }

    .button:focus:not(:active):before,
    .indicator:focus:not(:active):before {
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color)
    }

    .button:active,
    .indicator:active {
      --background: var(--background-active);
      --border-color: var(--border-color-active);
      --color: var(--color-active)
    }

    .button {
      padding: var(--padding)
    }

    .indicator {
      grid-gap: var(--indicator-gap);
      gap: var(--indicator-gap);
      display: flex;
      align-items: center;
      padding: var(--indicator-padding)
    }

    :host(:not([dir=rtl])) .indicator {
      box-shadow: calc(var(--separator-width)*-1) 0 0 var(--separator-background)
    }

    :host([dir=rtl]) .indicator {
      box-shadow: calc(var(--separator-width)*-1*-1) 0 0 var(--separator-background)
    }

    .indicator kat-icon {
      --size: var(--indicator-size)
    }

    .button {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit
    }

    .indicator {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit
    }

    :host([single-target]) .indicator {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit
    }

    :host([disabled]) .button,
    :host([disabled]) .indicator {
      --background: var(--background-disabled);
      --border-color: var(--border-color-disabled);
      --color: var(--color-disabled);
      cursor: not-allowed
    }

    :host([disabled]) button::-moz-focus-inner {
      border: 0
    }

    .options {
      color: var(--menu-color);
      min-width: var(--menu-min-width);
      display: none;
      z-index: 999;
      position: absolute;
      border-color: var(--menu-border-color);
      border-width: var(--menu-border-width);
      border-style: var(--menu-border-style);
      border-radius: var(--menu-border-radius);
      background: var(--menu-background);
      padding: var(--menu-padding);
      box-shadow: var(--menu-box-shadow);
      margin: var(--menu-margin)
    }

    .option {
      color: var(--option-color);
      font-size: var(--option-font-size);
      font-weight: var(--option-font-weight);
      font-family: var(--option-font-family);
      line-height: var(--option-line-height);
      display: block;
      position: relative;
      background: var(--option-background);
      border-color: var(--option-border-color);
      border-width: var(--option-border-width);
      border-style: var(--option-border-style);
      border-radius: var(--option-border-radius);
      padding: var(--option-padding);
      box-shadow: var(--option-box-shadow);
      text-align: var(--option-text-align);
      margin: var(--option-margin);
      cursor: pointer
    }

    .option:before {
      top: calc(var(--option-focus-ring-outlay)*-1);
      bottom: calc(var(--option-focus-ring-outlay)*-1);
      pointer-events: none;
      position: absolute;
      z-index: 1;
      content: "";
      border-radius: var(--hover-ring-radius)
    }

    // :host(:not([dir=rtl])) .option:before,
    // :host([dir=rtl])

    // .a {

    // }

    // :host([dir=rtl]) {
    //     --icon-margin: var(--kat-alert-icon-margin, 0 0 0 0.5rem)
    // }

    .katal-icon {
      --background: var(--icon-background);
      --border-color: var(--icon-border-color);
      --border-width: var(--icon-border-width);
      --border-style: var(--icon-border-style);
      --border-radius: var(--icon-border-radius);
      --color: var(--icon-color);
      --font-weight: var(--icon-font-weight);
      // --font-family: var(--icon-font-family);
      --font-family: 'KatalFloIcons'
        --line-height: var(--icon-line-height);
      --padding: var(--icon-padding);
      --size: var(--icon-size);
      --width: var(--icon-width);
      --height: var(--icon-height);
      --margin: var(--icon-margin);
      margin: var(--icon-margin)
    }

    .katal-icon i {
      font-family: 'KatalFloIcons';
      font-style: normal;
      color: rgb(0, 47, 54);
      font-weight: 400;


    }

    .ione1 {
      // display: inline-block;
      font-size: 40px;
    }

    .kat-alert {
      display: flex;
      align-items: center;

      // align-items flex-start
      // background-attachment scroll
      // background-clip border-box
      background-color: rgb(229, 242, 244);
      // background-image none
      // background-origin padding-box
      // background-position-x 0%
      // background-position-y 0%
      // background-repeat-x repeat
      // background-repeat-y repeat
      // background-size auto
      border-bottom-color: rgb(229, 242, 244);
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
      border-bottom-style: solid;
      border-bottom-width: 0px;
      border-left-color: rgb(229, 242, 244);
      border-left-style: solid;
      border-left-width: 0px;
      border-right-color: rgb(229, 242, 244);
      border-right-style: solid;
      border-right-width: 0px;
      border-top-color: rgb(229, 242, 244);
      border-top-left-radius: 1px;
      border-top-right-radius: 1px;
      border-top-style: solid;
      border-top-width: 0px;
      box-shadow: none;
      box-sizing: border-box;
      color: rgb(0, 47, 54);
      display: flex;
      font-family: Amazon Ember;
      font-size: 14px;
      font-weight: 400;
      height: 80px;
      line-height: 18px;
      margin-bottom: 10px;
      padding-bottom: 24px;
      padding-left: 24px;
      padding-right: 16px;
      padding-top: 16px;

      .content {
        margin-left: 12px;
      }
    }

    .kat-alert-header {
      color: rgb(0, 47, 54);
      font-size: 14px;
      font-weight: 700;
    }


    // .cta,
    // .description,
    // .header {
    //     display: block
    // }

    // .cta.empty,
    // .description.empty,
    // .header.empty {
    //     display: none
    // }

    // .header {
    //     color: var(--header-color);
    //     font-size: var(--header-font-size);
    //     font-weight: var(--header-font-weight);
    //     font-family: var(--header-font-family);
    //     line-height: var(--header-line-height);
    //     padding: var(--header-padding)
    // }

    // .description {
    //     color: var(--description-color);
    //     font-size: var(--description-font-size);
    //     font-weight: var(--description-font-weight);
    //     font-family: var(--description-font-family);
    //     line-height: var(--description-line-height);
    //     background: var(--description-background);
    //     border-color: var(--description-border-color);
    //     border-width: var(--description-border-width);
    //     border-style: var(--description-border-style);
    //     border-radius: var(--description-border-radius);
    //     padding: var(--description-padding)
    // }